<template>
  <div class="access-out-wrap">
    <PageTop
      firstMenu="配料管理"
      secondMenu="配料入库"
      title="入库列表"
      @add-thing="$to('accessInCreate')"
    ></PageTop>
    <div class="search-container">
      <el-select
        class="right-margin"
        clearable
        size="small"
        v-model="category"
        placeholder="选择入库类型"
      >
        <el-option
          v-for="item in categorys"
          :key="item.value"
          :label="item.value"
          :value="item.value"
        ></el-option>
      </el-select>

      <el-date-picker
        v-model="date"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        size="small"
        value-format="yyyy-MM-dd"
      >
      </el-date-picker>
      <div class="search-wrap">
        <el-input
          size="small"
          class="search"
          clearable
          v-model="keyword"
          placeholder="输入入库单号搜索"
        ></el-input>
        <el-button
          plain
          size="small"
          type="primary"
          @click="search"
        >查询</el-button>
      </div>
    </div>
    <tableList
      :tableData="listData"
      @getData="getData"
    ></tableList>

    <div class="page-wrap">
      <el-pagination
        class="page-count"
        @current-change="getData"
        background
        layout="total, prev, pager, next"
        :total="totalCount"
        :current-page.sync='page'
        :page-size="15"
      ></el-pagination>
    </div>

  </div>
</template>
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import tableList from "@/tables/access/accessInTable.vue";
import AjaxResquest from "@/api/apiRequest";
import PageTop from "@/components/pageTop.vue";

@Component({
  components: {
    tableList,
    PageTop
  }
})
export default class AccessIn extends Vue {
  accessOutRes!: AjaxResquest;
  listData: any[] = [];
  page: number = 1;
  pageSize: number = 15;
  totalCount: number = 0;

  categorys: any[] = [
    { value: "采购入库" },
    { value: "其他入库" },
    { value: "盘盈" }
  ];
  keyword: string = "";
  category: string = "";
  date: string = "";
  ids: any = "";
  $router!: any;
  created() {
    if (this.$route.query.search) {
      this.ids = this.$route.query.search;
    }
  }
  mounted() {
    this.accessOutRes = new AjaxResquest("/materials/materialsInlist");
    this.getData();
  }
  search() {
    this.ids = "";
    this.$router.replace({ path: this.$router.path });
    this.getData();
  }
  getData(): void {
    if (!this.date) {
      this.date = "";
    }
    let data: any = {
      page: this.page,
      pageSize: this.pageSize,
      order: this.keyword,
      state: this.category,
      btime: this.date[0],
      etime: this.date[1]
    };
    if (this.ids) {
      this.$notify({
        title: "查询信息",
        message: "当前为搜索结果,点击查询按钮查看全部结果",
        position: "top-left",
        duration: 0
      });
      data = { ...data, purchases_infos_id: this.ids };
    }
    this.accessOutRes.getFunction(data).then((res: any) => {
      if (res.data.code === 1) {
        this.listData = res.data.data.types;
        this.totalCount = res.data.data.allCount;
      }
    });
  }
}
</script>
<style lang="less">
.access-out-wrap {
  height: 100%;
  padding: 15px;
  box-sizing: border-box;
  .page-count-wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    padding: 0;
    margin-bottom: 15px;
  }
  .search-container {
    text-align: left;
    margin-bottom: 15px;
  }
  .search {
    margin-top: 15px;
    width: 250px;
    margin-right: 10px;
  }
}
</style>
